<template>
  <div class="add-todo">
    <a-input-search
      v-model:value.trim="todoTitle"
      allowClear
      placeholder="What do you prepare to do?"
      @search="addTodoItem"
    >
      <template v-slot:enterButton>
        <a-button>Add</a-button>
      </template>
    </a-input-search>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      todoTitle: ''
    }
  },
  methods: {
    ...mapActions(['addTodo']),
    addTodoItem (val) {
      if (!val) return
      const todoItem = {
        title: val,
        details: '',
        status: 0
      }
      this.addTodo(todoItem)
    }
  }
}
</script>
